<template>
  <div >
    <div >
        <el-main>
        <!-- main -->
          <el-row :gutter="20" >
              <el-col :span="17" style="padding-top:40px;display:flex; flex-direction: column;width:75%">
                  <div class="grid-content bg-purple" style="display:flex;flex:1 ;height:166px; margin:20px 0px">
                    <!-- 第一层左边  w54.35%-->
                      <div class="first-1" style="box-sizing:border-box;padding:20px ;height:166px; width: 54.35% ;border-radius:20px ;display:flex; flex-direction: column; line-height:20px ">
                            <div class="top" style="display:flex">
                              <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">工单统计</p>
                              <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;">{{timenow}}-{{monthBefore}}</span>
                            </div>
                            <div class="mid"  v-if="newdata4.length" style="display:flex ;justify-content:space-between">
                                <div><p class="color1">{{newdata4[0].total+newdata4[1].total}}</p><span class="color2 ">工单总数(个)</span></div>
                                <div><p class="color1">{{newdata4[0].completedTotal+newdata4[1].completedTotal}}</p><span class="color2 ">完成工单(个)</span></div>
                                <div><p class="color1">{{newdata4[0].progressTotal+newdata4[1].progressTotal}}</p><span class="color2 ">进行工单(个)</span></div>
                                <div><p class="color1">{{newdata4[0].cancelTotal+newdata4[1].cancelTotal}}</p><span class="color2 ">取消工单(个)</span></div>
                            </div>
                      </div>
                    <!-- 第一层右边 -->
                      <div class="first-2 " style="box-sizing:border-box;padding:20px;height:166px ; width:45.65%;margin-left:20px;border-radius:20px;display:flex; flex-direction: column; line-height:20px">
                          <div class="top" style="display:flex" >
                                  <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">销售统计</p>
                                  <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;">{{timenow}}-{{monthBefore}}</span>
                          </div>
                            <div class="mid" style="display:flex ;justify-content:space-around"  v-if="newdata5">
                                <div><p class="color3">{{newdata5}}</p><span class="color4 ">订单量(个)</span></div>
                                <div><p class="color3">{{newdata6}}</p><span class="color4 ">销售额(万元)</span></div>
                            </div>
                      </div>
                  </div>
                    <!-- 第二层左边 -->
                  <div class="grid-content bg-purple" style="flex:1,min-height:352px;background-Color:#fff ;border-radius:20px;">
                      <div style="width:100%;">
                        <!-- 第二层内容部分 -->

                            <!-- 标题部分 -->
                          <div style="margin:0 auto;width:95% ;height:34px;;line-height:34px ;display:flex;padding:20px 20px 0;justify-content:space-between">
                              <div class="top" style="display:flex ;">
                                <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">销售数据</p>
                                <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;" v-if="isshow">{{this.timeinfo.starttime}}-{{this.timeinfo.endtime}}</span>
                              </div>
                              <div class="top top-button" style="display:flex ;">
                                <a  class="button" href="javascript:;" style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;margin:0 5px" ref="weekclick" @click="week($event)">周</a>
                                <a  class="button" href="javascript:;" style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;margin:0 5px"  @click="month($event)">月</a>
                                <a  class="button" href="javascript:;" style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;margin:0 5px"  @click="year($event)">年</a>
                              </div>
                          </div>
                          <!-- 內容部分 -->
                            <div style="width:100% ;height:318px;;display:flex;margin:0 auto">
                                <div id="tubiao1" style=";width:50% ;margin-top:10px">
                                     <Line1 :data="newdata" v-if="isshow"/>
                                  </div>
                                <div id="tubiao2" style="width:50% ;margin-top:10px">
                                     <Line2 :data2="newdata2" v-if="isshow"/>
                                </div>
                            </div>
                      </div>
                  </div>
              </el-col>
  <!-- 右侧热门商品 -->
              <el-col :span="7"  style="padding-top:60px ;width:25%">
                  <div class="grid-content bg-purple first-3" style=" ;padding:20px ;" >
                    <!-- 热门标题 -->
                    <div class="hot" style="display:flex ;line-height:20px" v-if="newdata7.length!==0">
                              <p style="-webkit-box-align: center;color: #333;;font-weight: 600;;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">商品热榜</p>
                              <span style="margin-left: 10px;font-size: 12px;font-family: PingFangSC-Regular,PingFang SC;font-weight: 400;color: #999;">{{timenow}}-{{monthBefore}}</span>
                    </div>
                    <!-- 热门内容 -->
                    <div class="hot-content">
                        <div class="hot-item" v-for="item,index in newdata7" :key="index">
                          <span class="hot-text hot-text-icon" style="width:25px;height:40px">{{index+1}}</span>
                          <span class="hot-text tal" style="flex:1">{{item.skuName}}</span>
                          <span class="hot-text">{{item.count}}单</span>
                        </div>
                    </div>

                  </div>
              </el-col>
        </el-row >
        <el-row :gutter="20" style=";min-height:353px;border-radius:20px ;margin-top:20px;margin: 20px 0px 0;display:flex;line-height:20px">
              <el-col :span="14" style="padding:20px;border-radius:20px;margin-right:10px;background:#fff" >
                <!-- 合作商点位图 -->
                <div style="display:flex;justify-content:space-between">
                  <p style="-webkit-box-align: center;text-align:left;color: #333;;font-weight: 600;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">合作商点位图TOP5</p>
                 <a href="javascript:;" style="width:20px;height:20px;color:#5f84ff;border-radius:10px;border:2px #5f84ff solid" class="el-icon-more"></a></div>
                <div style="display:flex;align-items:center;margin-top:10px">
                  <div style=";width:600px;height:284px">
                    <Line3 v-if="isshow" :data3="newdata3"/>
                  </div >
                  <!-- 点位数 合作商 -->
                  <div style=";width:154px;height:230px;">
                   <div style="line-height:30px ;margin-top:40px"><span style="color:#072074;font-size:24px;font-weight:900">{{newdata8}}</span><p  style="color:#00412;font-size:12px">点位数</p></div>
                    <div style="line-height:30px ;margin-top:40px"><span style="color:#072074;font-size:24px;font-weight:900">{{newdata9}}</span><p  style="color:#00412;font-size:12px">合作商数</p></div>

                    </div>
               </div>
              </el-col>
              <!-- 点位异常监控 -->
              <el-col :span="10" style="padding:20px ;border-radius:20px;margin-left:10px;background:#fff">
                  <div style="display:flex;justify-content:space-between">
                  <p style="-webkit-box-align: center;text-align:left;color: #333;;font-weight: 600;font-size: 16px;font-family: PingFangSC-Semibold,PingFang SC;">异常点位监控</p>
                 <a href="javascript:;" style="width:20px;height:20px;color:#5f84ff;border-radius:10px;border:2px #5f84ff solid;" class="el-icon-more"></a></div>
                 <div style="width:600px;height:295px ;;margin-top:10px"><img style="margin-top:61px" src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt=""><div style="margin-top:20px">暂无数据</div></div>
              </el-col>

            </el-row>
        <!--↑ main -->
      </el-main>
    </div>
  </div>
</template>

<script>
import Line1 from '@/views/index/components/line1.vue'
import Line2 from '@/views/index/components/line2.vue'
import Line3 from '@/views/index/components/line3.vue'
import { cellinfo, cellinfo2, hezuoshang, topinfo, orderCount, orderAmount, top10, point, hznum } from '@/api/cellinfo'
export default {
  mounted () {
    this.$refs.weekclick.click()
  },
  components: {
    Line1, Line2, Line3
  },
  data () {
    return {
      timeinfo: { type: '', starttime: '', endtime: '' },
      isshow: false,
      newdata: {},
      newdata2: {},
      newdata3: [],
      newdata4: [],
      newdata5: 0,
      newdata6: 0,
      newdata7: [],
      newdata8: 0,
      newdata9: 0
    }
  },
  computed: {
    timenow () { return this.$moment().format('YYYY-MM-DD') },
    monthBefore () { return this.$moment().startOf('months').format('YYYY-MM-DD') }
  },
  async created () {
    const { data: data3 } = await hezuoshang()
    // console.log(data3);// data3第三城的数据
    this.newdata3 = data3
    const { data: data4 } = await topinfo(this.monthBefore, this.timenow)
    // console.log(data4);//data4头部是数据
    this.newdata4 = data4
    const { data: data5 } = await orderCount(this.monthBefore, this.timenow)
    console.log(data5)// data5头部右侧  总订单数
    this.newdata5 = data5
    const { data: data6 } = await orderAmount(this.monthBefore, this.timenow)
    console.log(data6)// data6头部右侧  销售总额
    this.newdata6 = (data6 / 1000000).toFixed(2)
    const { data: data7 } = await top10(this.monthBefore, this.timenow)
    console.log(data7)// data7右侧排行
    this.newdata7 = data7
    const { data: data8 } = await point()
    const { data: data9 } = await hznum()
    console.log(data8, data9)
    this.newdata8 = data8
    this.newdata9 = data9
  },
  methods: {
    async week (e) { this.classchose(e); this.weektime(); this.send() },
    async month (e) { this.classchose(e); this.monthtime(); this.send() },
    async year (e) { this.classchose(e); this.yeartime(); this.send() },
    // this.timeinfo.endtime=this.$moment().format('YYYY-MM-DD')// 过去一周的数据
    // this.timeinfo.starttime=this.$moment().subtract(7, 'days').format('YYYY-MM-DD');
    weektime () { // 本周的数据
      this.isshow = false
      this.timeinfo.endtime = this.$moment().format('YYYY-MM-DD')
      this.timeinfo.starttime = this.$moment().startOf('weeks').format('YYYY-MM-DD')
    },
    monthtime () { // 本月的数据
      this.isshow = false
      this.timeinfo.endtime = this.$moment().format('YYYY-MM-DD')
      const day = this.timeinfo.endtime.slice(8)
      this.timeinfo.starttime = this.$moment().subtract(day - 1, 'days').format('YYYY-MM-DD')
    },
    yeartime () { // 本年数据
      this.isshow = false
      this.timeinfo.endtime = this.$moment().format('YYYY-MM-DD')
      this.timeinfo.starttime = this.$moment().startOf('years').format('YYYY-MM-DD')
    },
    async send () { // 根据 时间段发送请求
      console.log('请求的时间段', this.timeinfo)
      const { data } = await cellinfo(1, this.timeinfo.starttime, this.timeinfo.endtime)
      this.newdata = data
      const { data: data2 } = await cellinfo2(this.timeinfo.starttime, this.timeinfo.endtime)
      this.newdata2 = data2
      console.log('请求到的数据', this.newdata, this.newdata2)
      this.isshow = true
    },
    classchose (e) { // 排他 添加active 类名
      console.log('事件对象', e)
      const buttons = document.querySelectorAll('.button')
      console.log('按钮', buttons)
      buttons.forEach(item => item.classList.remove('active'))
      e.target.classList.add('active')
    }

  }
}

</script>

<style lang='less' scoped>
  .el-main {
    .el-col.el-col-7{
    flex: 7;

    }
    .el-col.el-col-17{
    flex: 17;

    }
    padding: 20px;
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;

    .mid{
      margin-top: 30px;

      .color1{
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
        color: #072074;
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
      .color2{
       color: #91a7dc;
       font-size:12px ;
      }
      .color3{
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50%);;
        color: #ff5757;;
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold,PingFang SC;
        font-weight: 600;
        line-height: 50px;
      }
      .color4{
       color: #de9690;;
       font-size:12px ;
      }
    }
    .first-1{
    background: #dce9f9;
    background-Image:url(),url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
    background-repeat: no-repeat;
    background-position: 0 0,calc(100% - 12px) 100%;
    }
    .first-2{
    background-color: #fbefe8;
    background: #e9f3ff;
    background: #fbefe8 url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat calc(100% - 12px) 100%;
    background-repeat: no-repeat;
    background-position: 260 52,calc(100% - 12px) 100%;
    }
    .first-3{
        flex-direction: column;
        // height: calc(60vh - 72px);
        min-height: 538px;
        background: #fff;
        border-radius: 20px;
        .hot-content{
          // display: flex;
          // flex-direction: column;
          // align-content: space-between;
          .hot-item{
            text-align: left;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 24px;
            background-color: rgb(255, 255, 255);
            height: 20px;
            font-size: 14px;
            font-family: PingFangSC-Medium,PingFang SC;
            font-weight: 500;
            color: #333;
            line-height: 20px;
            overflow: hidden;
            // white-space: nowrap;
            // text-overflow: ellipsis;
            margin-top: 20px;
       >.tal{
          // background-color:red;
          margin-left :30px;
          font-size:14px;
          font-weight: 600;
          line-height: 20px;

         }
          }
         .hot-item span:nth-child(1){
          line-height: 17px;
          text-align: center;
            // background-color: red;
                background-repeat: no-repeat;
            background-position:4px 0;
            background-Image: url();
         }
          .hot-item:nth-child(1) span:nth-child(1){
          line-height: 17px;
          text-align: center;
            // background-color: red;
                background-repeat: no-repeat;
            background-position: 2px 0;
            background-Image: url();
         }
         .hot-item:nth-child(2) span:nth-child(1){
          line-height: 17px;
          text-align: center;
            // background-color: red;
                background-repeat: no-repeat;
            background-position: 2px 0;
            background-Image: url();
         }
         .hot-item:nth-child(3) span:nth-child(1){
          line-height: 17px;
          text-align: center;
            // background-color: red;
                background-repeat: no-repeat;
            background-position: 2px 0;
            background-Image: url();
         }

        }
    }
  }
  .top-button{
    justify-content:space-around;
    align-items: center;
    height:35px;
    width: 120px;
    border-radius:10px;
 background-color: #e7edf4;
    .button{
      width: 25px;
      height: 30px;
      line-height: 30px;
          //
    }
  }
  .active{
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
  }
</style>
